<template>
  <div>
    <el-table :data="cateList" stripe height="388">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="分类名称"></el-table-column>
      <el-table-column prop="images_count" label="图片总量"></el-table-column>
      <el-table-column prop="order" label="排序"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="">删除</el-button>
          <el-button type="primary" @click="editCate(scope.$index)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addCate">新增类目</el-button>
    <el-pagination
      v-model:current-page="currentPage"
      background
      layout="prev, pager, next, jumper"
      :total="totalCount"
      @current-change="currentChange"
    />
    <Drawer ref="addDrawer" title="新增类目" size="45%" @submit="submitAdd">
      <el-form :model="formAdd" :rules="rulesAdd" ref="addRef">
        <el-form-item prop="textName">
          <el-input
            type="text"
            v-model="formAdd.textName"
            placeholder="输入新增类目名称"
          />
        </el-form-item>
        <el-form-item prop="orderNum">
          <el-input
            type="number"
            v-model="formAdd.orderNum"
            placeholder="输入新增类目序号"
          />
        </el-form-item>
      </el-form>
    </Drawer>
    <Drawer ref="editDrawer" title="修改类目" size="45%" @submit="submitEdit">
      <el-form :model="formEdit" :rules="rulesEdit">
        <el-form-item prop="editName">
          <el-input
            type="text"
            v-model="formEdit.editName"
            :placeholder="editNam"
          />
        </el-form-item>
        <el-form-item prop="editOrder">
          <el-input type="number" v-model="formEdit.editOrder" />
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import Drawer from "../imagesList/Drawer.vue";
import { imageCateList, imageAddList, imageChangeList } from "@/api/images.js";
import { reactive, ref } from "vue";
import { toast } from "@/utils/index.js";

const addRef = ref(null);
const formAdd = reactive({
  textName: "",
  orderNum: "",
});
const rulesAdd = {
  textName: [
    {
      required: true,
      message: "不填不行哦！",
      trigger: "blur",
    },
  ],
  orderNum: [
    {
      required: true,
      message: "排个序吧！",
      trigger: "blur",
    },
  ],
};

const formEdit = reactive({
  editName: "",
  editOrder: "",
});

const cateList = ref([]);
//分类总数
const totalCount = ref(0);
// 当前页
const currentPage = ref(1);

const currentChange = (p) => {
  imgCateList(p);
};
const imgCateList = (pages) => {
  imageCateList(pages)
    .then((res) => {
      cateList.value = res.list;
      totalCount.value = res.totalCount;
      currentPage.value = pages;
    })
    .catch((err) => {});
};
imgCateList();

const addDrawer = ref(null);
//打开新增分类
const addCate = () => {
  addDrawer.value.open();
};
// 新增分类
const submitAdd = async () => {
  if (formAdd.textName && formAdd.orderNum) {
    const res = await imageAddList(formAdd.textName, formAdd.orderNum);
    toast("新增成功");
  } else {
    toast("新增失败", "error");
  }
};

const editDrawer = ref(null);
const editId = ref(0);
const editNam = ref("");
// 打开编辑类目
const editCate = (index) => {
  //   console.log(index);
  editId.value = cateList.value[index].id;
  editNam.value = cateList.value[index].name;
  editDrawer.value.open();
};

const submitEdit = async () => {
  if (formEdit.editName && formEdit.editOrder) {
    const res = await imageChangeList(
      editId.value,
      formEdit.editName,
      formEdit.editOrder
    );
    toast("修改成功");
  } else {
    toast("修改失败", "error");
  }
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 5px;
}
</style>
